<template>
  <div>
    <button @click="exportclick(data)">点击导出文件</button>
  </div>
</template>

<script>
  import docxtemplater from 'docxtemplater'
  import PizZip from 'pizzip'
  import JSZipUtils from 'jszip-utils'
  import {
    saveAs
  } from 'file-saver'
  export default {
    data() {
      return {
        data: {
          user_name: "XXX",
          remark: "XXX的外出申请",
          form: [{
              val: "私事"
            },
            {
              val: ["2020-09-23", "2020-09-25"]
            },
            {
              val: "市内"
            },
            {
              val: "回家"
            },
            {
              val: "回家吃饭"
            },
          ]
        }
      }
    },
    methods: {
      exportclick(e) {
        console.log(e)
        let docxsrc = "../../static/2.docx"; //模板文件的位置
        let docxname = e.remark; //导出文件的名字
        // 读取并获得模板文件的二进制内容
        JSZipUtils.getBinaryContent(docxsrc, function(error, content) {
          // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error;
          }

          // 创建一个PizZip实例，内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docx templater实例对象
          let doc = new docxtemplater().loadZip(zip);
          // 设置模板变量的值
          doc.setData({
            ...e, // e中的数据可以再模板中直接使用
            cause: e.form[4].val,
            arrive: e.form[2].val,
            starttime: e.form[1].val[0],
            endtime: e.form[1].val[1]
          });

          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
            };
            console.log(JSON.stringify({
              error: e
            }));
            throw error;
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, docxname);
        });
      }
    }
  }
</script>

<style>
</style>
